<template>
<div class="container-fluid">
	<MyHeader></MyHeader>
    <article>
        <div class="photowall">
            <ul class="wall_a">
                <li><a href="/"><img src="./../assets/1.jpg">
                        <figcaption>
                            <h2>不再因为别人过得好而焦虑，在没有人看得到你的时候依旧能保持节奏 </h2>
                        </figcaption>
                    </a></li>
                <li>
                    <p class="text_b"><a href="/">逃避自己的人，最终只能导致自己世界的崩塌，而变得越来越没有安全感。</a></p>
                </li>
                <li><a href="/"><img src="./../assets/3.jpg">
                        <figcaption>
                            <h2>不再因为别人过得好而焦虑，在没有人看得到你的时候依旧能保持节奏 </h2>
                        </figcaption>
                    </a></li>
                <li>
                    <p class="text_b"><a href="/">逃避自己的人，最终只能导致自己世界的崩塌，而变得越来越没有安全感。</a></p>
                </li>
                <li>
                    <p class="text_b"><a href="/">逃避自己的人，最终只能导致自己世界的崩塌，而变得越来越没有安全感。</a></p>
                </li>
                <li><a href="/"><img src="./../assets/5.jpg">
                        <figcaption>
                            <h2>不再因为别人过得好而焦虑，在没有人看得到你的时候依旧能保持节奏 </h2>
                        </figcaption>
                    </a></li>
                <li>
                    <p class="text_b"><a href="/">逃避自己的人，最终只能导致自己世界的崩塌，而变得越来越没有安全感。</a></p>
                </li>
                <li><a href="/"><img src="./../assets/6.jpg">
                        <figcaption>
                            <h2>不再因为别人过得好而焦虑，在没有人看得到你的时候依旧能保持节奏 </h2>
                        </figcaption>
                    </a></li>
            </ul>
        </div>
        <div class="abox">
            <h2>博主简介</h2>
            <div class="biji-content" id="content">
                本人为人诚实谦虚，待人友善，工作认真，做事严谨，能承受压力。拥有多年的Java开发和维护经验，拥有扎实的Java编程基础和不断进取的精神。 
            </div>
            <div class="navlist">
                <ul>
                    <li class="navcurrent"><a href="#top1">基本信息</a> </li>
                    <li> <a href="#top2">工作技能</a> </li>
                    <li> <a href="#top3">心路历程</a> </li> 
                </ul>
            </div>
            <div class="navtab">
                <div class="navitem" style="display: block;" name="top1">
                    <div class="content">
                        <p>网名：lzdn | 张林</p>
                        <p>职业：java 程序员 </p>
                        <p>邮箱：1660766588@qq.com</p>
                        <p>个人微信：</p>
                        <p><img src="./../assets/geren.png"></p>

                    </div>
                </div>
                <div class="navitem" name="top2">
                    <div class="content">
                        <p class="ab_t">工作技能：</p>
                        <p>1、java、golang、Python</p>
                        <p>2、css、html、jquery、vue、angularjs</p>
                        <p>3、oracle、mysql</p>
                        <p>4、linux</p>
                        
                    </div>
                </div>
                <div class="navitem" name="top3">
                    <div class="content">
                        <p class="ab_t">心路历程：</p>
                        <p><a href="/">暂无</a></p>
                       <!-- <p><a href="http://www.yangqq.com/news/life/2018-04-27/816.html" target="_blank">【走进心灵】个人博客，属于我的小世界！</a></p> -->
                    </div>
                </div> 
            </div>
        </div>
    </article>
    <MyFooter></MyFooter>
</div>
</template>
<script>
import MyHeader from './header'
import MyFooter from './footer'
export default {
    components:{MyHeader,MyFooter},
    name:'about',
    mounted(){
        this.initAbout();
    },
    methods:{
        initAbout:function(){            
            var len = 100; // 默认显示的字数
            var content = document.getElementById("content"); // content 获取内容 div 对象
            var text = content.innerHTML;  // text 为内容
            var span = document.createElement("span"); // 创建一个 SPAN 标签
            var n = document.createElement("a");  // 创建一个 A 标签
            span.innerHTML = text.substring(0,len); // SPAN 标签的内容为 text 的前 len 个字符
            n.innerHTML = text.length > len ? "...展开" : ""; // 创建的 A 标签内容，如果内容字数大于 len，那么为“..展开”，否则为空
            n.href = "javascript:void(0)"; // 设置 A 标签的链接地址（随意）
            n.onclick = function(){ // 点击 A 链接执行下面函数
                // 如果 A 标签的内容为“..展开”，那么 A 标签内容变成“收起”，SPAN 标签的内容为 DIV 全部内容，否则内容为前 len 个字符
                if (n.innerHTML == "...展开"){
                    n.innerHTML = "收起";
                    span.innerHTML = text;
                }else{
                    n.innerHTML = "...展开";
                    span.innerHTML = text.substring(0,len);
                }
            }
            content.innerHTML = "";   // 设置 DIV 内容为空
            content.appendChild(span); // 把 SPAN 元素加到 DIV 中
            content.appendChild(n);   // 把 A 元素加到 DIV 中
            $('.navlist li').click(function(){
                $(this).addClass('navcurrent').siblings().removeClass('navcurrent');
                $('.navtab>div:eq('+$(this).index()+')').show().siblings().hide();
            });
        }
    }

}
</script>
<style>
@import url("../lib/css/base.css");
@import url("../lib/css/about.css");
@import url("../lib/css/m.css");
</style>
